<template>
  <div class="baoxiaoall">
    <top></top>
    <div style="background: #fff;" v-loading="loading">
      <div style="padding: 20px;">
        <div class="flexb">
          <el-form ref="all" :model="all" inline label-width="80px" @submit.native.prevent>
            <!-- <el-select v-model="all.channel_id" style="margin-right: 20px;" placeholder="请选择渠道" filterable clearable>
              <el-option :label="item.channel_name" :value="item.id" v-for="item in qudaolist" :key="item.id">
              </el-option>
            </el-select> -->

            <el-form-item label="店铺名">
              <el-input v-model="all.merchant_name"></el-input>
            </el-form-item>
            <!-- <el-form-item label="订单来源">
              <el-input v-model="all.source"></el-input>
            </el-form-item> -->
            <el-form-item label="商品编码">
              <div @click="quanxuanyong" style="background: #eaeaea; padding:0 20px; border-radius:5px; cursor: pointer;">
                <span v-if="all.page_ids == ''">点击选择</span>
                <span v-if="all.page_ids != ''">已选中{{all.page_ids.split(',').length}}个</span>
              </div>
              <!-- <el-input v-model="all.sku" ></el-input> -->
            </el-form-item>
            <el-form-item label="时间">
              <el-date-picker v-model="time" type="daterange" :picker-options="pickerOptions" @change="changetime" range-separator="至" value-format="yyyy-MM-dd"
                start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>

            </el-form-item>
            <el-button type="danger" @click="search">检索</el-button>
            <el-button type="danger" @click="daochu">导出</el-button>
            <el-button type="danger" @click="daochu2">导出页面数据</el-button>
          </el-form>
          <!-- <el-button type="danger" @click="daoru">导入支出费用</el-button> -->
        </div>

      </div>
      <div style="padding: 20px;">
        <el-table :data="list" show-summary border style="width: 100%" :summary-method="getSummaries">
          <el-table-column prop='merchant_name' label="店铺名称"></el-table-column>
          <el-table-column prop='orders_amount' label="订单数量"></el-table-column>
          <el-table-column prop='submit_amount' label="开卡中/已领取"> </el-table-column>
          <!--          <el-table-column prop='address_mobile' label="开卡失败"> </el-table-column> -->
          <el-table-column prop='refund_amount' label="退款成功量"> </el-table-column>
          <el-table-column prop='deliver_amount' label="发货数量"> </el-table-column>
          <el-table-column prop='address_mobile' label="发货率">
            <template slot-scope="scope">
              <span v-if="scope.row.orders_amount != 0">
                {{scope.row.deliver_amount/scope.row.orders_amount | tofix}}
              </span>
              <span v-if="scope.row.orders_amount == 0">0</span>
            </template>
          </el-table-column>
          <el-table-column prop='active_amount' label="激活数量"> </el-table-column>

          <el-table-column label="激活率（发货）">
            <template slot-scope="scope">
              <span v-if="scope.row.deliver_amount != 0">
                {{scope.row.active_amount/scope.row.deliver_amount | tofix}}
              </span>
              <span v-if="scope.row.deliver_amount == 0">0</span>

            </template>
          </el-table-column>
          <el-table-column label="激活率（订单）">
            <template slot-scope="scope">
              <span v-if="scope.row.orders_amount != 0">
                {{scope.row.active_amount/scope.row.orders_amount | tofix}}
              </span>
              <span v-if="scope.row.orders_amount == 0">0</span>

            </template>
          </el-table-column>
          <!-- <el-table-column prop='address_mobile' label="实际交易额"> 暂时没有</el-table-column>
          <el-table-column prop='address_mobile' label="推广费用"> 暂时没有</el-table-column>
          <el-table-column prop='address_mobile' label="其他费用"> 暂时没有</el-table-column>
          <el-table-column prop='address_mobile' label="发货成本"> 暂时没有</el-table-column>
          <el-table-column prop='address_mobile' label="激活成本"> 暂时没有</el-table-column>
          <el-table-column prop='address_mobile' label="预估佣金"> 暂时没有</el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- <el-button type="text">下载订单明细</el-button> -->
              <el-button type="text" @click="go(scope.row)">销售商品构成</el-button>
              <!-- <el-button type="text">成本分析</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog title="新建销售渠道" :visible.sync="log" width="600px" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <el-form ref="all" :model="all" label-width="80px" @submit.native.prevent>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addgo">确定</el-button>
        </span>
      </el-dialog>
      <bianmaquanxuan ref="bianmaquanxuan" @bianmaquanxuans="bianmaquanxuans" v-if="bianmaquanxuanshow" ></bianmaquanxuan>
    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import axios from "axios";
  import top from "./components/top.vue";
  import bianmaquanxuan from "./components/bianmaquanxuan.vue";
  export default {
    components: {
      top,bianmaquanxuan
    },
    name: "apilist",
    data() {
      return {
        all: {
          start: "", //		是	string	时间
          end: "", //		是	string	时间
          channel_id: "", //	2	是	string	渠道id
          source: "", //	pdd	是	string	来源
          sku: "", //		是	string	商品编码
          page: 1,
          page_size: 20,
          page_ids:[],
          product_ids:[],
          merchant_name:"",
          merchant_id:""
        },
        time: [],
        list: [],
        total: 0,
        loading: false,
        qudaolist: [],

        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
         bianmaquanxuanshow:false,
      }
    },
    filters: {
      tofix(val) {
        return (val * 100).toFixed(2) + '%'
      }
    },
    created() {
      // this.getlist()
      this.time = [moment().subtract(7, 'days').format('YYYY-MM-DD'),moment().format('YYYY-MM-DD')]
      this.changetime()
      this.getqudaolist()
      this.getlist()
    },
    mounted() {


    },
    methods: {
      quanxuanyong:function(){
        this.bianmaquanxuanshow = true
        this.$nextTick(()=>{
          this.$refs.bianmaquanxuan.duoxuanlog2 = true
        })
      },
      bianmaquanxuans:function(data){
        console.log(data)
        //product_ids
        this.all.page_ids = data.toString()
      },

      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          console.log(index)
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = '----';
          }
        });

        return sums;
      },
      // getSummaries({columns, data}) {
      //     let sums = ['合计', '', 35]
      //     return sums
      // },
      changetime:function(){
        if(this.time != '' && this.time != null){
          this.all.start = this.time[0]
          this.all.end = this.time[1]
        }else{
          this.all.start = ''
          this.all.end = ''
        }
      },
      daochu:function(){

        let obj = {
          start:this.all.start,//		是	string	无
          end:this.all.end,//		是	string	无
          channel_id:this.all.channel_id,//		是	string	无
          source:this.all.source,//		是	string	无
          order_page_id:'',//		是	string	逗号分隔
          sources:'',//		是	array	数组
          product_id:'',//		是	string	无
          type:2,//		是	string	0我发展1我生产2我分销
          merchant_name:this.all.merchant_name,
          merchant_id:this.all.merchant_id
        }
        axios.post('/api/form/data/export', obj)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$confirm('已提交导出，是否跳转到下载页面?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                      }).then(() => {
                        this.$router.push('/order_export2')
                      })
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      daochu2:function(){

          this.$set(this.all,'export',1)
          axios.get('/api/form/data/merchant', {
            params: this.all
          })
          // axios.get('/api/form/data/source')
          .then(response => {
            if (response.data.msg.code == 0) {
              window.location.href = response.data.data
              this.$delete(this.all,'export')
              console.log(this.all)
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      go: function(item) {

        let all = JSON.parse(JSON.stringify(this.all))


        this.$set(all,'merchant_id',item.merchant_id)
        this.$set(all,'merchant_name',item.merchant_name)

        let routeData = this.$router.resolve({
        	path: "/baobiao/xiaoshouqudao2/xiaoshouqudao2goucheng",
        	query: all
        });
        window.open(routeData.href, '_blank');

      },
      daoru: function() {

      },
      search: function() {
        this.all.page = 1
        this.getlist()
      },
      //翻页
      fanye: function(page) {
        this.page = page
        this.getlist()
      },
      //获取列表
      getlist: function() {
        this.loading = true
        axios.get('/api/form/data/merchant', {
            params: this.all
          })
          // axios.get('/api/form/data/source')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data
              // this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      getqudaolist: function() {
        axios.get('/api/form/channels?page=1&page_size=500')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.qudaolist = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      }
    }
  }
</script>

<style scoped lang="scss">
  .baoxiaoall {
    background: #f2f2f2;
    min-height: 100vh;

    /deep/ .el-table__footer-wrapper {
        position: absolute;
        top: 48px;
        left: 0;
    }
    /deep/ .el-table__body-wrapper {
        margin-top: 48px;
    }
    .el-form-item {
      margin-bottom: 0;
    }

    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
</style>
